<!DOCTYPE html>
<#assign ctx=springMacroRequestContext.contextPath />
<html class="x-admin-sm">
    <head>
        <meta charset="UTF-8">
        <title>调度系统</title>
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <link rel="stylesheet" href="./css/font.css">
        <link rel="stylesheet" href="./css/xadmin.css">
        <script src="./lib/layui/layui.js" charset="utf-8"></script>
        <script type="text/javascript" src="./js/xadmin.js"></script>
        <!--[if lt IE 9]>
          <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
          <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->

        <style>
            .layui-table-cell .layui-form-checkbox[lay-skin="primary"] {
                left: 32%;
            }
        </style>

    </head>
    
    <body>
        <div class="layui-fluid">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-md12">
                    <div class="layui-card">
                        <div class="layui-card-body">
                            <form class="layui-form layui-col-space5">
                                <div class="layui-inline layui-show-xs-block">
                                    <input type="text" name="title" placeholder="请输入任务名称" autocomplete="off" class="layui-input">
                                </div>
                                <div class="layui-input-inline layui-show-xs-block">
                                    <select name="jobGroupId" lay-search lay-filter="jobGroup-select">
                                        <option value="">请选择分组</option>
                                        <#list jobGroupList as jobGroup>
                                            <option value="${jobGroup.id}">${jobGroup.name}</option>
                                        </#list>
                                    </select>
                                </div>
                                <div class="layui-input-inline layui-show-xs-block">
                                    <select name="status" lay-filter="status-select">
                                        <option value="">请选择任务状态</option>
                                        <option value="1">正常</option>
                                        <option value="0">停止</option>
                                    </select>
                                </div>
                                <div class="layui-inline layui-show-xs-block">
                                    <button class="layui-btn" lay-submit="" lay-filter="data-search-btn">
                                        <i class="layui-icon">&#xe615;</i>
                                    </button>
                                </div>
                            </form>
                        </div>
                        <div class="layui-card-body ">
                            <table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter"></table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </body>
    <script type="text/html" id="toolbarDemo">
        <div class = "layui-btn-container" >
            <button class="layui-btn" lay-event="addJob">
                <i class="layui-icon">&#xe61f;</i>添加
            </button>
            <button class="layui-btn" lay-event="editJob">
                <i class="layui-icon">&#xe642;</i>编辑
            </button>
            <button class="layui-btn layui-btn-danger" lay-event="removeJob">
                <i class="layui-icon">&#xe640;</i>删除
            </button>
            <button class="layui-btn layui-btn-warm" lay-event="pauseJob">
                <i class="layui-icon">&#xe651;</i>停止运行
            </button>
            <button class="layui-btn layui-btn-normal" lay-event="restoreJob">
                <i class="layui-icon">&#x1005;</i>恢复运行
            </button>
            <button class="layui-btn" lay-event="executeJob">
                <i class="layui-icon">&#xe652;</i>立即运行
            </button>
        </div >
    </script>
    <script type="text/html" id="currentTableBar">
        <a class="layui-btn layui-btn-sm" lay-event="showLog">
            查看日志
        </a>
    </script>
    <script>
        layui.use(['form', 'table'], function() {
            var $ = layui.jquery,
                form = layui.form,
                table = layui.table;

            // 初始化表格
            table.render({
                elem: '#currentTableId',
                url: '${ctx}/pageJob',
                toolbar: '#toolbarDemo',
                defaultToolbar: [],
                cols: [[
                    {type: "checkbox", width: 50, fixed: "left"},
                    {field: 'jobGroupName', width: 120, title: '分组名', align: 'center'},
                    {field: 'title', width: 180, title: '任务名称', align: 'center'},
                    {field: 'status', width: 80, title: '状态', align: 'center'
                        ,templet:function(row){
                            if (row.status == 1) {
                                return '<span class="layui-btn layui-btn-xs layui-btn-normal">正常</span>';
                            } else if (row.status == 0) {
                                return '<span class="layui-btn layui-btn-xs layui-bg-orange">停止</span>';
                            } else {
                                return "-"
                            }
                        }
                    },
                    {field: 'url', width: 350, title: 'URL地址', align: 'center'},
                    {field: 'method', width: 100, title: '请求方式', align: 'center'},
                    {field: 'cron', width: 100, title: 'cron表达式', align: 'center'},
                    {field: 'nextExecuteTime', width: 160, title: '下次运行时间', align: 'center'},
                    {field: 'params', title: '任务参数', width: 200, align: 'center'},
                    {field: 'remark', width: 250, title: '备注', align: 'center'},
                    {title: '操作', minWidth: 120, templet: '#currentTableBar', fixed: "right", align: "center"}
                ]],
                limits: [10, 15, 20, 25, 50, 100],
                limit: 10,
                page: true,
                //res 即为原始返回的数据
                parseData: function(res) {
                    return {
                        "code": res.status == 200 ? 0 : -1, //解析接口状态
                        "msg": res.message, //解析提示文本
                        "count": res.data.total, //解析数据长度
                        "data": res.data.list //解析数据列表
                    };
                }
            });

            //监听单元格编辑
            table.on('edit(test)', function(obj) {
                var value = obj.value //得到修改后的值
                    ,
                    data = obj.data //得到所在行所有键值
                    ,
                    field = obj.field; //得到字段
                layer.msg('[ID: ' + data.id + '] ' + field + ' 字段更改为：' + value);
            });

            // 头工具栏事件
            table.on('toolbar(currentTableFilter)', function (obj) {
                if (obj.event == "addJob") {
                    xadmin.open('添加任务','${ctx}/add-job',550,600,false);
                    return false;
                }
                var checkData = table.checkStatus('currentTableId').data;
                if (checkData.length == 0) {
                    layer.msg('请选择一条记录', {
                        icon : 5,
                        offset : "top",
                        time : 1000
                    });
                } else if (checkData.length > 1){
                    layer.msg('暂不支持批量操作', {
                        icon : 5,
                        offset : "top",
                        time : 1000
                    });
                } else {
                    if (obj.event === 'removeJob' || obj.event === 'pauseJob' || obj.event === 'restoreJob') {
                        var tips;
                        var url = obj.event;
                        switch (obj.event) {
                            case "removeJob":
                                tips = '确定删除吗?';
                                break;
                            case "restoreJob":
                                tips = '确定恢复运行吗?';
                                break;
                            case "pauseJob":
                                tips = '确定停止运行吗?';
                                break;
                        }
                        layer.confirm(tips, function (index) {
                            //设置遮罩层
                            var loading = layer.msg('提交中', {icon: 16, shade: 0.3, time:0});
                            $.ajax({
                                type: 'post',
                                url: '${ctx}/'+url,
                                data: {'jobInfoId':checkData[0].id},
                                dataType: 'json',
                                success: function(res) {
                                    layer.close(loading);
                                    layer.close(index);
                                    if (res.status == 200) {
                                        // 重载表格
                                        layer.msg(res.message);
                                        // 重载表格
                                        table.reload('currentTableId');
                                    } else {
                                        //错误提示框
                                        layer.msg(res.message, {icon : 5});
                                    }
                                }
                            });
                        });
                    } else if (obj.event === 'executeJob') { // 立即运行操作
                        layer.confirm('确定立即执行吗?', function (index) {
                            //设置遮罩层
                            var loading = layer.msg('提交中', {icon: 16, shade: 0.3, time:0});
                            $.ajax({
                                type: 'post',
                                url: '${ctx}/executeJob',
                                data: {'jobInfoId':checkData[0].id},
                                dataType: 'json',
                                success: function(res) {
                                    layer.close(loading);
                                    layer.close(index);
                                    if (res.status == 200) {
                                        layer.msg(res.message);
                                        // 重载表格
                                        table.reload('currentTableId');
                                    } else {
                                        //错误提示框
                                        layer.msg(res.message, {icon : 5});
                                    }
                                }
                            });
                        });
                        return false;
                    } else if (obj.event === 'editJob') { //编辑任务
                        xadmin.open('编辑任务','${ctx}/edit-job?jobInfoId='+checkData[0].id,550,600,false);
                        return false;
                    }
                }
            });

            // 查看任务日志
            table.on('tool(currentTableFilter)', function (obj) {
                if (obj.event === 'showLog') {
                    var id = obj.data.id;
                    xadmin.open('日志详情','${ctx}/job-log?jobInfoId='+id,1108,600,false);
                    return false;
                }
            });

            // 监听搜索操作
            form.on('submit(data-search-btn)', function (data) {
                //执行搜索重载
                table.reload('currentTableId', {
                    method: 'post'
                    , page: {
                        curr: 1
                    }
                    , where: {
                        title: data.field.title,
                        jobGroupId: data.field.jobGroupId,
                        status: data.field.status
                    }
                });
                return false;
            });

            // 监听分组选择器
            form.on('select(jobGroup-select)', function(data){

                return false;
            });

        });
    </script>

</html>